<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>音乐列表</title>
    <link rel="stylesheet" th:href="@{Layuimini/lib/layui-v2.6.3/css/layui.css}" href="Layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" th:href="@{Layuimini/css/public.css}" href="Layuimini/css/public.css" media="all">
    <script  src="jQuery/jquery-2.1.1.min.js" th:src="@{LightYear/js/jquery.min.js}" charset="utf-8"></script>
    <script th:src="@{Layuimini/lib/layui-v2.6.3/layui.js}" src="Layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
</head>
<body>
<h1>Music</h1>
<!--这是一个音乐页面案例,引入该页面可直接实现音乐播放功能-->
<div >

    <button  onclick="toBefore()">上一首</button>
    <button  onclick="isMusic()">开始播放</button>
    <button  onclick="toNext()">下一首</button>

    <tr th:each="music,stat:${musicList}"><!--循环userList,以person作为形参-->
<!--        hidden="true"-->
        <div class="panel-body" >
            <div class="panel-title">
                <h5 th:text="'文件名:'+${music.musicName}"></h5>
            </div>
            <div class="panel-content">
                <h1 class="no-margins">
                    <audio class="audios" controls="controls" onended="tonext">
                        <source th:src="${music.musicUrl}"/>
                    </audio>
                </h1>
                <div class="stat-percent font-bold text-gray" th:text="'文件大小:'+${music.musicSize}"></div>
            </div>
        </div>
        <hr  style="width:1000PX;height:20px;">
<!--        <h2 th:text="${music.id}"></h2>-->
    </tr>


</div>
</body>
<script th:inline="javascript">
    var musicInfo = [[${musicList}]];
    var musices =new Array();
    for (var i=0;i<musicInfo.length;i++){
        musices.push(musicInfo[i].musicName);
    }
    var audios = document.getElementsByClassName("audios");
   // console.log(audios);
    var flag = true;
    var index = 0;
    var num_song = audios.length;
    function isMusic() {
        if (flag) {
           // $("#musBtn").removeClass("fa fa-caret-down").addClass("fa fa fa-music");
            // console.log(audios[index%num_song]);
            audios[index % num_song].play();
            layer.msg(musices[index % num_song])
            flag = false;
        } else {
           // $("#musBtn").removeClass("fa fa fa-music").addClass("fa fa-caret-down");
            audios[index % num_song].pause();
            flag = true;
        }
    }
    function toBefore() {
        if (index == 0) {
            layer.msg("已经是第一首了")
            audios[0].play();
        } else {
            audios[index % num_song].load();
            audios[index % num_song].pause();
            index--;
            layer.msg(musices[index % num_song])
            audios[index % num_song].play();
        }

    }
    function toNext() {

        audios[index % num_song].load();
        audios[index % num_song].pause();
        index++;
        layer.msg(musices[index % num_song])
        audios[index % num_song].play();
    }
</script>
</html>